Getting Started with React Development with the React Suite Library — Nav Menus

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Nav Menus

We can add a nav menu with the Nav component.

To add it, we write:

import React, { useState } from "react";
import { Nav, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav activeKey={activeKey} onSelect={handleSelect}>
        <Nav.Item eventKey="home" icon={<Icon icon="home" />}>
          Home
        </Nav.Item>
        <Nav.Item eventKey="news">News</Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
      </Nav>
    </div>
  );
}

We pass the activeKey to the activeKey prop.

handleSelect lets us get the activeKey and set it.

Nav.Item has the menu item.

It’ll highlight when the activeKey matches the eventKey .

We can add an icon with the icon prop.

We can add the vertical prop to make the nav vertical:

import React, { useState } from "react";
import { Nav, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav vertical activeKey={activeKey} onSelect={handleSelect}>
        <Nav.Item eventKey="home" icon={<Icon icon="home" />}>
          Home
        </Nav.Item>
        <Nav.Item eventKey="news">News</Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
      </Nav>
    </div>
  );
}

We can set the nav item to be active with the active prop:

import React, { useState } from "react";
import { Nav, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav onSelect={handleSelect}>
        <Nav.Item eventKey="home" active={activeKey === "home"}>
          Home
        </Nav.Item>
        <Nav.Item eventKey="news" active={activeKey === "news"}>
          News
        </Nav.Item>
        <Nav.Item eventKey="solutions" active={activeKey === "solutions"}>
          Solutions
        </Nav.Item>
      </Nav>
    </div>
  );
}

And we can disable an item with the disabled prop:

import React, { useState } from "react";
import { Nav, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav activeKey={activeKey} onSelect={handleSelect}>
        <Nav.Item eventKey="home">Home</Nav.Item>
        <Nav.Item eventKey="news" disabled>
          News
        </Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
      </Nav>
    </div>
  );
}

To make nav items have equal sizes, we can add the justified prop:

import React, { useState } from "react";
import { Nav, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav activeKey={activeKey} justified onSelect={handleSelect}>
        <Nav.Item eventKey="home">Home</Nav.Item>
        <Nav.Item eventKey="news">News</Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
      </Nav>
    </div>
  );
}

Also, we can add dropdowns into our nav with the Dropdown component:

import React, { useState } from "react";
import { Nav, Dropdown } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  const [activeKey, setActiveKey] = useState();

  const handleSelect = (activeKey) => {
    setActiveKey(activeKey);
  };

  return (
    <div className="App">
      <Nav activeKey={activeKey} onSelect={handleSelect}>
        <Nav.Item eventKey="home">Home</Nav.Item>
        <Nav.Item eventKey="news">News</Nav.Item>
        <Nav.Item eventKey="solutions">Solutions</Nav.Item>
        <Dropdown title="Fruit">
          <Dropdown.Item>Apple</Dropdown.Item>
          <Dropdown.Item>Orange</Dropdown.Item>
          <Dropdown.Menu title="Grape">
            <Dropdown.Item>Red</Dropdown.Item>
            <Dropdown.Item active>Green</Dropdown.Item>
          </Dropdown.Menu>
        </Dropdown>
      </Nav>
    </div>
  );
}

Conclusion

We can add nav menus into our React app with React Suite.